<template>
  <div class="chart-contain">
    <div id="forest" class="pictorialBar"></div>
    <div id="legend" class="legend">人工造林的面积为：156万公顷</div>
  </div>
</template>

<script>
export default {
  name: "v-forest-pictorialbar",
  data() {
    return {
      treeDataURI:
        "",

      beginYear: 2000,
      endYear: 2018,
      lineCount: 10,
      chart: null,
      that: null,
      timerName: null,
    };
  },
  created(){
      
  },
  mounted() {
    this.initChart();
    this.setTimer(this.chart, this.beginYear, this.endYear);
  },
  beforeDestroy() {
    clearInterval(this.timerName);
  },
  methods: {
     resizeChart(){
        this.chart.resize()
    },
    setTimer() {
        var mydata = [200,250,456,356,432,476,556,599,631,645,678,693,701,724,782,789,795,799,834,852,867,896]
      var currentYear = this.beginYear;
      // 定时器中this指向的是window对象，并非vue对象
      var that = this;
      this.timerName = setInterval(() => {
        currentYear++;
        document.getElementById("legend").innerText = '人工造林的面积为：' + String(mydata[currentYear%this.beginYear]) + ' 万公顷'
        //console.log(currentYear);
        if (currentYear > that.endYear) {
          currentYear = that.beginYear;
        }
        that.chart.setOption({
          xAxis: {
            name: currentYear + '年',
          },
          series: [
            {
              data: that.makeSeriesData(currentYear),
            },
            {
              data: that.makeSeriesData(currentYear, true),
            },
          ],
        });
      }, 800);
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("forest"));
      this.setChart();
      window.addEventListener("resize",()=>{
          this.resizeChart()
      })
    },
    setChart() {
      var option = {
        title: {
          text: " 全国人工造林统计",
          subtext: "国家林草局统计年鉴",
          left: "center",
        },
        color: ["#e54035"],
        xAxis: {
          axisLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          name: this.beginYear + '年',
          nameLocation: "middle",
          nameGap: 40,
          nameTextStyle: {
            color: "green",
            fontSize: 30,
            fontFamily: "Arial",
          },
          min: -2800,
          max: 2800,
        },
        yAxis: {
          data: this.makeCategoryData(),
          show: false,
        },
        grid: {
          top: "center",
          height: 280,
        },
        series: [
          {
            name: "all",
            type: "pictorialBar",
            symbol: "image://" + this.treeDataURI,
            symbolSize: [30, 55],
            symbolRepeat: true,
            data: this.makeSeriesData(this.beginYear),
            animationEasing: "elasticOut",
          },
          {
            name: "all",
            type: "pictorialBar",
            symbol: "image://" + this.treeDataURI,
            symbolSize: [30, 55],
            symbolRepeat: true,
            data: this.makeSeriesData(this.beginYear, true),
            animationEasing: "elasticOut",
          },
        ],
      };
      if (option && typeof option === "object") {
        this.chart.setOption(option, true);
      }
    },
    makeCategoryData() {
      var categoryData = [];
      for (var i = 0; i < this.lineCount; i++) {
        categoryData.push(i + "a");
      }
      return categoryData;
    },
    makeSeriesData(year, negative) {
      // make a fake value just for demo.
      var r = (year - this.beginYear + 1) * 10;
      var seriesData = [];

      for (var i = 0; i < this.lineCount; i++) {
        var sign = negative
          ? -1 * (i % 3 ? 0.9 : 1)
          : 1 * ((i + 1) % 3 ? 0.9 : 1);
        seriesData.push({
          value: 0,
          value:
            sign *
            (year <= this.beginYear + 1
              ? Math.abs(i - this.lineCount / 2 + 0.5) < this.lineCount / 5
                ? 5
                : 0
              : (this.lineCount - Math.abs(i - this.lineCount / 2 + 0.5)) * r),
          symbolOffset: i % 2 ? ["50%", 0] : null,
        });
      }
      return seriesData;
    },
  },
};
</script>

<style>
.chart-contain {
  width: 100%;
  height: calc(100vh - 100px);
}
.pictorialBar {
  width: 100%;
  height: 500px;
  margin-top: 10px;
  display: inline-block;
}
.legend{
   margin-top:-30px ;
   margin-bottom: 30px;
    font-size: 30px;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
   color: #008000;
}
</style>